<template>
 <me-scroll>
    <!-- 菜单栏需要滚动，传的不是字符串，需要前面加冒号':scrollbar' -->
    <!-- 点击，选中项呈激活状态 switchTab 事件派发，使得菜单栏的item.id可以与右侧内容通信 -->
    <ul class="tab" :scrollbar='false'>
    <!-- 当item.id === curId的时候，当前item被激活 -->
    <li class="tab-item" :class="{'tab-item-active': item.id === curId}" v-for="(item, index) in items" 
    :key="index" @click="switchTab(item.id)">
      {{item.name}}
    </li>
  </ul>
 </me-scroll>
</template>

<script>
  import MeScroll from 'base/scroll';
  import { categoryNames } from './config';

  export default {
    name: 'categoryTab',
    components: {
      MeScroll
    },
    data() {
      return {
        curId: '' // 当前id
      }
    },
    created() {
      this.init();
      this.switchTab(this.items[0].id);
    },
    methods: {
      init() {
        this.items = categoryNames;
      },
      switchTab(id) { // 传入id等于当前id的时候，不做处理
        if (this.curTd === id) {
          return;
        }
        this.curId = id;
        this.$emit('switch-tab', id);
      }

    }
  };
</script>

<style lang="scss" scoped>
  @import '~assets/scss/mixins';

  $tab-item-height: 46px;
  
  .tab {
    width: 100%;

    &-item {
      height: $tab-item-height;
      background-color: #fff;
      border-right: 1px solid $border-color;
      border-bottom: 1px solid $border-color;
      color: #080808;
      font-size: $font-size-l;
      font-weight: bold;
      text-align: center;
      line-height: $tab-item-height;
      @include ellipsis();

      &:last-child {
        border-bottom: none;
      }
    }
    &-item-active {
      background: none;
      border-right: none;
      color: #f23030;
    }

  }

</style>
